import React, { Component } from 'react';
import { routerRedux, Route, Switch } from 'dva/router';

import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
    Button, Menu, Dropdown, Icon, Row, Col,
    Input, InputNumber,
    Steps, Card, Popover, Badge, Table, Tooltip, Divider,
    Checkbox, Modal, Radio,
    Select, message, DatePicker, Popconfirm,
    Form, Upload
} from 'antd';
import classNames from 'classnames';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './UpdataPassword.less';
//修改密码
const { MonthPicker, RangePicker } = DatePicker;

const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;

const getWindowWidth = () => (window.innerWidth || document.documentElement.clientWidth);

@connect(({ user1 }) => ({
    user1,
}))
@Form.create()
export default class UpdataPassword extends Component {
    state = {
        count: 0,
        oldPassword: '',
        newPassword: '',
        againPassword: '',
    }
    componentDidMount() {

    }

    handleOldPassword = (e) => {
        this.setState({
            oldPassword: e.target.value
        })
    }
    handleNewPassword = (e) => {
        this.setState({
            newPassword: e.target.value
        })
    }
    handleAgainPassword = (e) => {
        this.setState({
            againPassword: e.target.value
        })
    }

    handleUpdatePassword = () => {
        if (this.state.oldPassword === this.state.newPassword) {
            message.warning("新密码和旧密码不能一致")
        }
        else if (this.state.newPassword !== this.state.againPassword) {
            message.warning("两次输入的密码不一致")
        }
        else if (this.state.oldPassword !== sessionStorage.getItem("password")) {
            message.warning("旧密码错误")
        }
        else if (this.state.oldPassword == "" || this.state.newPassword == "" || this.state.againPassword == "") {
            message.warning("旧密码和新密码不能为空")
        }
        else {
            this.props.dispatch({
                type: 'user1/updatePassword',
                payload: {
                    userName: sessionStorage.getItem("userName"),
                    password: this.state.oldPassword,
                    newPw: this.state.newPassword
                },
                callback: () => {
                    this.props.dispatch(routerRedux.push('/user/login'));
                }
            })
        }
    }

    render() {
        const { form, login } = this.props;
        const { getFieldDecorator } = this.props.form;
        return (
            <PageHeaderLayout
                title="修改密码"
                logo={<img alt="" src="https://gw.alipayobjects.com/zos/rmsportal/nxkuOJlFJuAUhzlMTCEe.png" />}
            >
                <Row >
                    <Card
                        bordered={false}
                        style={{ marginBottom: 24 }}
                    >
                        <Row style={{ marginTop: 40, marginBottom: 40 }}>
                            <DescriptionList col="2">
                                <Description term="原密码">
                                    <Row>
                                        <Input
                                            placeholder="请输入旧密码"
                                            type="password"
                                            value={this.state.oldPassword}
                                            onChange={this.handleOldPassword} />
                                    </Row>
                                </Description >
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 40, marginBottom: 40 }}>
                            <DescriptionList col="2">
                                <Description term="新密码">
                                    <Row>
                                        <Input
                                            placeholder="请输入新密码"
                                            type="password"
                                            value={this.state.newPassword}
                                            onChange={this.handleNewPassword} />
                                    </Row>
                                </Description >
                            </DescriptionList>
                        </Row>
                        <Row style={{ marginTop: 40, marginBottom: 40 }}>
                            <DescriptionList col="2">
                                <Description term="确认密码">
                                    <Row>
                                        <Input
                                            placeholder="请输入新密码"
                                            type="password"
                                            value={this.state.againPassword}
                                            onChange={this.handleAgainPassword} />
                                    </Row>
                                </Description >
                            </DescriptionList>
                        </Row>
                       
                        <Row >
                            <Col span={2} style={{ marginBottom: 24 }}>
                                <p style={{ textAlign: 'right' }}>
                                    <Button onClick={this.handleUpdatePassword} type="primary" htmlType="submit" >提交</Button>
                                </p>
                            </Col>
                        </Row>
                    </Card>
                </Row>
            </PageHeaderLayout>
        );
    }
}
